<!-- <template>
	<view class="page-container job-container">
		<uni-nav-bar dark background-color='#37C2BB' :fixed="true" status-bar left-icon="left" :border="false" title="我的收藏" @clickLeft="goBack" />
		<view class="pl-3 pr-3 pb-3 pt-1">
			<view class="recommend-box">
				<view class="box-content">
					<template v-for="(cell,index) in tab_content_list">
						<view class="recommend-item p-3 mt-2" :key="index" @click="goDetail(cell)">
							<view class="header d-flex justify-content-between align-items-center">
								<text class="d-block fs_14 font-weight-semibold">{{ cell.name }}</text>
								<text class="d-block fs_15 font-weight-semibold pay">
									{{ cell.pay }}
								</text>
							</view>
							<view class="content mt-2 mb-2">
								{{ cell.educationalRequirements }}
							</view>
							<view class="footer">
								<view class="">
									<uni-icons type="calendar-filled" size="14"></uni-icons>
									<text class="fs_11 ml-1">{{ cell.jobDuties }}</text>
								</view>
								<view class="d-flex justify-content-between align-items-center">
									<view class="d-flex align-items-center">
										<uni-icons type="location-filled" size="14"></uni-icons>
										<text class="fs_11 ml-1">{{ cell.type }}</text>
									</view>	
									<view class="d-flex align-items-center">
										<view class="d-flex align-items-center mr-3">
											<image class="image" :src="personsIcon" mode="scaleToFill" style="width:24rpx;height:24rpx" />
											<text class="fs_11 ml-1">{{ cell.peopleCount }}</text>
										</view>
										<view class="d-flex align-items-center">
											<uni-icons type="eye-filled" size="14"></uni-icons>
											<text class="fs_11 ml-1">{{ cell.workExperience }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personsIcon:require("@/static/index/personsIcon.png"),
				tab_content_list:[],
				currentPage:1,
				pageSize:10,
				total:0,
				loadStatus:"more",
			}
		},
		onLoad(){
			this.initCollection();
		},
		onShow(){
			
		},
		onReady() {
		    //动态修改状态栏的颜色
		    uni.setNavigationBarColor({
		        frontColor: '#000000',
		        backgroundColor: '#ff0000'
		    })
		},
		
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 获取求职列表
			initCollection(){
				this.$api.collectionList({
					// city_id: uni.getStorageSync('city_id'),
					token:uni.getStorageSync('user_token'),
					page:this.currentPage,
					limit:this.pageSize
				}).then(res=>{
					if(res.code == 200){
						this.total = res.data.total;
						if (this.currentPage == 1) {
							this.tab_content_list = res.data.enterpriseRecruitmentVOS;
							if (this.tab_content_list.length < this.total) {
								this.loadStatus = "more";
							} else {
								this.loadStatus = "no-more";
							}
						} else {
							this.loadStatus = "loading";
							setTimeout(()=>{
								this.tab_content_list = this.tab_content_list.concat(res.data.enterpriseRecruitmentVOS);
								if (this.tab_content_list.length < this.total) {
									this.loadStatus = "more";
								} else {
									this.loadStatus = "no-more";
								}
							},1000)
						};
						uni.hideNavigationBarLoading();
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					
				});
			},
			
			// 查看详情
			goDetail(item){
				uni.navigateTo({
					// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
					url: "/pages/workDetail/workDetail?id=" + item.id+ "&from=collection" ,
				})
			},
		},
		
		// 上拉加载
		onReachBottom() {
			this.currentPage++;
			if (this.tab_content_list.length.length < this.total) {
				this.initCollection();
			} else {
				uni.hideNavigationBarLoading();
				this.loadStatus = "no-more";
			}
		},
		
		// 下拉刷新
		onPullDownRefresh(){
			this.loadStatus = "more";
			this.currentPage = 1;
			this.pageSize = 10;
			this.total = 0;
			this.initCollection();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
	}
</script>

<style lang="scss">
.nav {
    width: 750rpx;
    height: 146rpx;
    background: $uni-primary;
    position: fixed;
    top: var(--window-top);
    left: 0;
    z-index: 2;
  }
</style> -->

<template>
	<view class="page-container job-container">
		<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="我的收藏" @clickLeft="goBack" />
		<view class="pl-3 pr-3 pb-3 pt-1 content">
			<view class="job_tab">
				<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onClickItem" />
			</view>
			<view class="recommend-box">
				<view class="box-content" v-if='tab_content_list && tab_content_list.length'>
					<template v-for="(cell,index) in tab_content_list">
						<view 
							v-if='currentTab == 0'
							class="recommend-item p-3 mt-2 content" 
							:key="index" 
							@click="goDetail(cell)" 
						>
							<view class="header d-flex justify-content-between align-items-center">
								<text class="item-title d-block fs_14 font-weight-semibold">{{ cell.name }}</text>
								<text class="d-block fs_15 font-weight-semibold pay">{{ cell.pay }}</text>
							</view>
							<view class="content mt-2 mb-2">
								{{ cell.educationalRequirements }}
							</view>
							<view class="footer">
								<view class="d-flex justify-content-between align-items-center">
									<view>
										<uni-icons type="calendar-filled" size="14"></uni-icons>
										<text class="fs_11 ml-1">{{ cell.workExperience }}</text>
									</view>
								</view>
								<view class="d-flex justify-content-between align-items-center mt-1">
									<view class="d-flex align-items-center">
										<uni-icons type="location-filled" size="14"></uni-icons>
										<text class="fs_11 ml-1">{{ cell.jobDuties }}</text>
									</view>	
									<view class="d-flex align-items-center">
										<view class="d-flex align-items-center mr-3">
											<image class="image" :src="personsIcon" mode="scaleToFill" style="width:24rpx;height:24rpx" />
											<text class="fs_11 ml-1">{{ cell.peopleCount }}</text>
										</view>
										<view class="d-flex align-items-center">
											<uni-icons type="eye-filled" size="14"></uni-icons>
											<text class="fs_11 ml-1">{{ cell.all_views }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="work-item p-3 mt-2" v-if='currentTab == 1' @click="goDetail(cell)" >
							<view class="content">
								<view class="item-title fs_14 font-weight-semibold">
								  <view>{{cell.courseTitle}}</view>
								  <text>{{cell.cost}}</text>
								</view>
								<view class="describe">
								  <text>{{cell.classification ? cell.classification : '暂无'}}</text>
								  <text>{{cell.time ? cell.time : '暂无'}}</text>
								  <!-- <text>未融资</text> -->
								</view>
								<!-- <view class="place ellipsis">
									{{cell.briefIntroduction}}
								</view> -->
							</view>
						</view>
					</template>
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
				<view v-else class="noData">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabs: ['职位收藏', '培训收藏'],
				personsIcon:require("@/static/index/personsIcon.png"),
				tab_content_list: [],
				tab_content_list1:[],
				tab_content_list2:[],
				currentPage:1,
				pageSize:10,
				total:0,
				loadStatus:"more",
			}
		},
		onLoad(){
			
		},
		onShow(){
			
			this.initJobList(this.currentTab);
		},
		methods: {
			// tab切换
			onClickItem(e) {
				if (this.currentTab !== e.currentIndex) {
					this.currentTab = e.currentIndex
				}
				uni.setStorageSync('job_activeTab',e.currentIndex);

				this.total = 0;
				if(e.currentIndex == 0) {
					this.tab_content_list = this.tab_content_list1;
				} else {
					this.tab_content_list = this.tab_content_list2;
				}
			},
			
			// 获取求职列表
			initJobList(job_type){
				this.$api.collectionList().then(res=>{
					console.log('res', res);
					if(res.code == 200){
						this.tab_content_list = [];
						this.tab_content_list1 = [];
						this.tab_content_list2 = [];
						this.tab_content_list1.push(...res.data.enterpriseRecruitmentVOS || []);
						this.tab_content_list2.push(...res.data.trainVOS || []);
						if (this.currentTab == 0) {
							this.tab_content_list = this.tab_content_list1;
						} else {
							this.tab_content_list = this.tab_content_list2;
						}
						this.loadStatus = "no-more";
						uni.hideNavigationBarLoading();
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					
				});
			},
			
			// 查看详情
			goDetail(item){
				if(this.currentTab == 0) {
					uni.navigateTo({
						// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
						url: "/pages/workDetail/workDetail?id=" + item.id + "&from=collection",
					})
				} else {
					uni.navigateTo({
						// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
						url: "/pages/training/trainingDetail?id=" + item.id,
					})
				}
				
			},
			// 返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
		
		// 上拉加载
		onReachBottom() {
			this.currentPage++;
			if (this.tab_content_list.length < this.total) {
				this.initJobList(this.currentTab + 1);
			} else {
				uni.hideNavigationBarLoading();
				this.loadStatus = "no-more";
			}
		},
		
		// 下拉刷新
		onPullDownRefresh(){
			this.loadStatus = "more";
			this.currentPage = 1;
			this.pageSize = 10;
			this.total = 0;
			this.initJobList(this.currentTab + 1);
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		
	}
</script>

<style lang="scss">
	page {
	  width: 680rpx;
	  padding-bottom: 180rpx;
	}
	.box-content{
		.work-item {
			border: 2rpx solid var(--grey-50);
			border-radius: 15rpx;
			.content{
				// padding: 15rpx 20rpx;
				margin: auto;
				margin-bottom: 10rpx;
				
				.item-title {
				  display: flex;
				  justify-content: space-between;
				  // font-weight: bold;
				
				  view {
				    font-size: 28rpx;
				  }
				
				  text {
				    font-size: 28rpx;
				    color: $uni-primary;
				  }
				}
				
				.describe {
				  margin-top: 15rpx;
				
				  text {
				    margin-right: 20rpx;
				    font-size: 24rpx;
				    color: var(--grey-200);
				  }
				}
				.place {
					flex: 1;
					color: var(--grey-200);
					font-size: 24rpx;
					text-align: left;
				}
				.ellipsis{
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
</style>

